<template>
  <view class="integraMall u-border-top" :class="{ fixedHome: storeListStatus }">
    <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
      <StoreListBox
        ref="storeListBox"
        @close="storeListStatus = false"
        @show="storeListStatus = true"
        @switchStore="switchStore"
      />
    </view>
    <!-- 无店铺信息劝退弹窗 yupo-->
    <exit-box v-if="showExit" />
    <scroll-view
      scroll-y
      :style="{ height: srcollHeight + 'px' }"
      @scrolltolower="scrolltolower"
    >
      <view class="scroll-content">
        <!-- banner -->
        <Banner v-if="imgUrls.length" :img-urls="imgUrls" />
        <!--&lt;!&ndash; 首页入口菜单 &ndash;&gt;-->
        <home-inte-fun @seeAll="seeAll" />

        <HomeDesigner :datas="desginList" @jumpMore="seeAll" />

        <HomeRecommend :datas="caseList" @jumpDetail="seeAll" />

        <u-loadmore :status="loadStatus" :load-text="loadText" />

      </view>
    </scroll-view>
    <!-- 授权遮罩层 -->
    <Login
      ref="loginBtn"
      :options="options"
      :disable-auth="true"
      @getStoreAfter="getStoreAfter"
      @noStore="showExit = true"
    />
    <Location v-if="isLoaction" @getLocation="getLocationNext" />
    <FloatLayer custom-nav />
    <u-no-network />
  </view>
</template>

<script setup lang="ts">
import { onLoad, onResize } from "@dcloudio/uni-app";
import { ref, reactive, computed, toRaw } from 'vue';
import { store, useStore } from '../../store';
import { app, home, common } from '../../api/const';
import request from '../../api/request';
import StoreListBox from './StoreListBox.vue';
import HomeInteFun from './HomeInteFun.vue';
import HomeDesigner from './HomeDesigner.vue';
import HomeRecommend from './HomeRecommend.vue';

interface AuthInfo {
  [key: string]: any;
}

const imgUrls:HomeModel.BannerInfo[] = reactive([]);
const desginList:DesignDetail[] = reactive([]);
const caseList:CaseDetail[] = reactive([]);

const statusBarHeight = ref(0);
const navHeight = ref(0);
const srcollHeight = ref(0);
const showExit = ref(false)
console.log(store.state)
// const storeId = computed(() => {
//   return toRaw(useStore().state).storeVo.id
// })

onLoad((option) => {
  let extConfig = uni.getExtConfigSync? uni.getExtConfigSync(): {}
  console.log(extConfig);
  uni.getSystemInfo({
    success: (res:any) => {
      console.log(res);
      statusBarHeight.value = res.statusBarHeight
      navHeight.value = res.statusBarHeight + 46;
      srcollHeight.value = res.screenHeight - navHeight.value;
    },
  });
})

onResize(() => {
  getAuthInfo();
  store.dispatch('getStoreList');
  pageDataGain();
})

const pageDataGain = () => {
  getBanners();
  getDesignList();
  getCaseList();
}

const getBanners = () => {
  const storeId = store.state.storeVo.id
  const params = { storeId };
  const requestOptions = {
    path: home.onlineMallBanner,
    method: 'post',
    data: params,
    hideLoading: true,
  };
  request<HomeModel.BannerInfo[]>(requestOptions).then((res) => {
    if (res.code === 200) {
      const arr = res.data;
      imgUrls.push(...arr);
    }
  });
}

const getDesignList = () => {
  const storeId = store.state.storeVo.id
  const params = { storeId };
  const requestOptions = {
    path: common.queryStylist,
    method: 'post',
    data: params,
    hideLoading: true,
  };
  request<PagingInfo<DesignDetail>>(requestOptions).then((res) => {
    if (res.code === 200) {
      console.log(res.data);
      const arr = res.data.records?.slice(0, 3) || [];
      desginList.push(...arr)
    }
  })
}

const getCaseList = () => {
  const params = {
    storeId: store.state.storeVo.id,
    caseType: 0
  };
  const requestOptions = {
    path: common.queryHouseCase,
    method: 'post',
    data: params,
    hideLoading: true,
  };
  request<PagingInfo<CaseDetail>>(requestOptions).then((res) => {
    if (res.code === 200) {
      const arr = res.data.records || []
      caseList.push(...arr)
    }
  })
}

const getAuthInfo = (storeId?: string|number) => {
  return new Promise((resolve, reject) => {
    uni.login({
      success: (res) => {
        const storeVo: StoreVo = uni.getStorageSync('storeVo');
        const params = {
          appid: uni.getAccountInfoSync().miniProgram.appId,
          code: res.code,
          storeId: storeId || storeVo?.id || '',
        };
        const requestOptions = {
          path: app.getAuth,
          method: 'get',
          data: params,
          hideLoading: true,
        };
        if (res.code) {
          request<AuthInfo>(requestOptions).then((res) => {
            if (res.code === 200) {
              uni.setStorageSync('memberInfo', res.data.memberInfoVo ? res.data.memberInfoVo : '');
              uni.setStorageSync('token', res.data.token);
              uni.setStorageSync('memberSession', res.data.session);
              uni.setStorageSync('salseManVo', res.data.salseManVo);
              uni.setStorageSync('storeVo', res.data.storeVo);
              uni.setStorageSync('memberCode', res.data.memberInfoVo ? res.data.memberInfoVo.memberCode : '');
              // 判断是否是导购员
              if (res.data.salseManVo) {
                uni.setStorageSync('isSalseMan', true);
              } else {
                uni.setStorageSync('isSalseMan', false);
              }
              if (res.data.memberInfoVo && res.data.memberInfoVo.mobile && res.data.memberInfoVo.mobile && res.data.storeVo && res.data.storeVo.id) {
                uni.setStorageSync('isAuth', true);
                resolve(true);
              } else {
                uni.setStorageSync('isAuth', false);
                resolve(false);
              }

            } else if (res.code === 1100) {
              uni.setStorageSync('isAuth', false);
              resolve(false);
            }
          });
        } else {
          reject(res.errMsg);
        }
      },
    });
  });
}

const switchStore = (data:StoreVo) => {
  store.commit('SET_STORE', data)
  pageDataGain()
}

const seeAll = (item: any) => {
  if (item.tabPath) {
    uni.switchTab({
      url: item.tabPath,
    });
  } else if (item.path) {
    uni.navigateTo({
      url: item.path,
    });
  } else {
    uni.showToast({
      title: '敬请期待！',
      icon: 'none',
    });
  }
}

const scrolltolower = () => {

}
</script>

<style lang="scss">
.integraMall {
  width: 100%;
  padding-top: 11px;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 100vh;
  height: 100vh;
  background: white;
  .nav {
    width: 100%;
    overflow: hidden;
  }
  .scroll-content {
    padding-bottom: 100px;
  }
  .header-title {
    position: relative;
    padding: 10px 13px 0 10px;
    .line {
      width: 4px;
      height: 10px;
      background: $uni-color-primary;
      display: inline-block;
    }
    .name {
      font-size: 18px;
      font-weight: 500;
      color: $uni-text-color;
      line-height: 25px;
      padding-left: 6px;
      position: relative;
    }
    .icon {
      display: inline-block;
      position: absolute;
      z-index: 99;
      top: -2px;
      right: -2px;
      img {
        width: 17px;
        height: 17px;
      }
    }
    .time {
      display: inline-block;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 17px;
      text-align: center;
      padding-left: 15px;
      vertical-align: top;
      padding-top: 2px;
      .time1 {
        width: 21px;
        height: 21px;
        background: rgba(253, 96, 14, 1);
        border-radius: 3px;
        display: inline-block;
        line-height: 21px;
      }
      .time2 {
        font-size: 12px;
        font-weight: 300;
        color: rgba(255, 42, 42, 1);
        line-height: 17px;
        padding-left: 4px;
        padding-right: 4px;
      }
    }
    .see-all {
      position: absolute;
      z-index: 99;
      bottom: 20px;
      right: 13px;
      font-size: 12px;
      font-weight: 400;
      color: $uni-text-color-grey;
      line-height: 17px;
      img {
        width: 5px;
        height: 10px;
        display: inline-block;
      }
    }
  }
}
.fixedHome {
  position: fixed;
}
</style>
